<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../../../../../../../plugin/bootstrap-3.0.1/docs-assets/ico/favicon.png">

    <title>Carousel Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../static/js/docs-assets/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link th:href="@{/css/carousel.css}" rel="stylesheet">
</head>
<body>
    <!--导航-->
    <div th:replace="theme/default/header::header"></div>

    <!--内容-->
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-8 column" >
                        <!--占位-->
                    </div>
                    <div class="col-md-4 column">
                        <div class="jumbotron">
                            <h1>
                                学术论坛
                            </h1>
                            <p>
                                This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                            </p>
                            <p>
                                <a class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">上传新的文章</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-8 column" th:each="article : ${articles}" style="position: relative; bottom: 550px;">
                        <h2>
                            <p th:text="${article.title}"> </p>
                        </h2>
                        <p>
                            期刊名：<div th:text="${article.journal}"></div><br>
                        作者名：<div th:text="${article.author}"></div><br>
                        年份：<div th:text="${article.year}"></div>
                        </p>
                        <p>
                            <a class="btn" href="#">详细信息 »</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-4 column">
            </div>
            <div class="col-md-4 column"  style="position: relative; bottom: 450px;">
                <ul class="pagination pagination-lg">
                    <li>
                        <a href="#">Prev</a>
                    </li>
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">Next</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 column">
            </div>
        </div>

        <!-- FOOTER -->
        <div th:replace="theme/default/footer::footer"></div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-right: 0px;">
            <div class="modal-dialog" >
                <div class="modal-content" style="margin-left: 10%;width: 800px;">
                    <div class="modal-header" style="width: 1200px;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                    </div>
                    <div class="modal-body">
                        <br><form id="enwSubmit"> 上传enw文件<input type="file" name="file" id="enw"> <button onclick="enwUploading()" type="button" class="btn btn-light">开始解析</button></form>
                        <br>上传文件<input type="file"> <button onclick="location='/uploading/enw'" type="button" class="btn btn-light">开始解析</button>
                        <br>上传文件<input type="file"> <button onclick="location='/uploading/enw'" type="button" class="btn btn-light">开始解析</button>
                    </div>
                    <!-- 隐藏在这里所解析出的数据 -->
                    <div>
                        <!--dosomething-->
                        <table class="table table-striped">
                            <tr>
                                <th>题目</th>
                                <th>作者</th>
                                <th>期刊</th>
                            </tr>

                            <tr id="art">

                            </tr>

                        </table>
                    </div>

                    <div class="modal-footer" >
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button onclick="location.href='uploading'" type="button" class="btn btn-primary"  th:text="${temp}">

                            提交更改
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/docs-assets/holder.js}"></script>
    <script th:inline="javascript">
        function enwUploading() {
            alert("执行");
            // 首先验证文件格式
            var fileName = $('#enw').val();
            if (fileName === '') {
                alert("请选择文件");
                return false;
            }
            var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1,
                fileName.length)).toLowerCase();
            if (fileType !== 'enw') {
                alert("文件格式不正确，EndNote文件！");
                return false;
            }
            var formData = new FormData($('#enwSubmit')[0]);
            // 进行提交后台的操作
            $.ajax({
                type: 'post',
                url: "/uploading/enw",
                enctype: 'multipart/form-data',
                dataType:'json',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success:function (data) {
                    $("#art").append('<td>' + data.title +  '</td>'
                        + '<td>' + data.author +'</td>'
                        + '<td>' + data.journal +'</td>')
                },
                error:function () {
                    alert("解析失败")
                }
            })
        }

    </script>
</body>
</html>